<template>
  <!--选择查询方案-->
  <div style="float:left;width: 90px;">
    <el-popover
      placement="bottom"
      :width="200"
      sytle="height:400px;"
      trigger="hover"
    >
      <template #reference>
        <el-button
          type="primary"
          round
          style="margin-right: 16px"
        >
          查询方案
        </el-button>
      </template>
      <el-button type="" @click="mydefault">默认</el-button>
      <br>
      <el-button type="" 
        v-for="(item, index) in state.customer"
        :key="'case_' + item.id + index"
        @click="mycase(index)"
      >
        {{item.label}}
      </el-button>
     
    </el-popover>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { getFindState } from '../state/state-find'

  /**
   * 选择查询方案，快捷查询前显示
   */
  export default defineComponent({
    name: 'nf-el-find-case',
    props: {
    },
    setup(props, context) {

      const state = getFindState()

      // 设置默认的快捷查询字段
      const mydefault = () => {
        state.tmpQuickFind.length = 0
        state.tmpQuickFind.push(...state.quickFind)
      }

      const mycase = (index) => {
        // 修改临时
        state.tmpQuickFind.length = 0
        state.tmpQuickFind.push(...state.customer[index].colIds)
      }

      return {
        mydefault,
        mycase,
        state
      }
    }
  })
</script>